<template>
	<view class="content">
		<swiper layout-type='transformer' transformer-type='threeD' class="banner-swiper" interval="5000" duration="500"
			:indicator-dots='false' indicator-type='jumpWithOffset' :style="{flex:`1`,width:'100vw'}"
			indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#ffffff" :circular='false'
			@change='swiperChange' :current="PageCur">
			<swiper-item>
				<home></home>
			</swiper-item>
			<swiper-item>
				<view>
					<found :PageCur='PageCur'></found>
				</view>
			</swiper-item>
			<swiper-item>
				<mine></mine>
			</swiper-item>
		</swiper>
		<SkylineModal :show="showModal" title="提示" confirmText="确定" cancelText="取消" :maskClosable="true"
			@confirm="onConfirm" @cancel="onCancel">
			<view>这是一个适配 Skyline 模式的 UniApp  弹窗</view>
			<view>可以自定义内容区域</view>
		</SkylineModal>
		<bs-drag></bs-drag>
		<view class="show-card" v-show="isShowCard" >
			<!-- From Uiverse.io by Cobp --> 
			<div class="container-cards-ticket">
			  <div class="card-ticket">
			    
			    <div class="separator">
			      <span class="span-lines"></span>
			    </div>
			    <div class="content-ticket">
			      <div class="content-data">
			        <div class="destination">
			          <div class="dest start">
			            <p class="country">name</p>
			            <p class="acronym">VIP</p>
			            <p class="hour">
			             
			              06:00
			            </p>
			          </div>
			          
			          <div class="dest end">
			            <p class="country">Bolivia</p>
			            <p class="acronym">至尊</p>
			            <p class="hour">
			            
			              14:00
			            </p>
			          </div>
			        </div>
			        <div style="border-bottom: 2px solid #e8e8e8"></div>
			        <div class="data-flex-col">
			          <div class="data-flex">
			            <div class="data">
			              <p class="title">ID</p>
			              <p class="subtitle">762151</p>
			            </div>
			            <div class="data passenger">
			              <p class="title">Passenger</p>
			              <p class="subtitle"></p>
			            </div>
			          </div>
			          <div class="data-flex">
			            <div class="data">
			              <p class="title">Flight</p>
			              <p class="subtitle">BK165</p>
			            </div>
			            <div class="data">
			              <p class="title">Gate</p>
			              <p class="subtitle">A11</p>
			            </div>
			            <div class="data">
			              <p class="title">Seat</p>
			              <p class="subtitle">21C</p>
			            </div>
			          </div>
			        </div>
			      </div>
			      <div class="container-icons">
			        <div class="icon plane">
			          
			        </div>
			        <div class="icon uiverse">
			         
			        </div>
			      </div>
			    </div>
			  </div>
			</div>

		</view>
		<view class="tabbar-page" style="position: absolute;left: 0;bottom: 0;">
			<tabbar @ontoggle='ontoggle' @showCard='isShowCard=!isShowCard' @toggleShowModal='toggleShowModal' :PageCur='PageCur'></tabbar>
		</view>
	</view>
</template>

<script>
	import {
		ref,
		onMounted,
		watch,
		nextTick,
		getCurrentInstance
	} from "vue"
	import tabbar from '../tabbar/tabbar.vue';
	import home from '../home/home.vue';
	import mine from '../mine/mine.vue';
	import found from '../found/found.vue';
	export default {
		components: {
			tabbar,
			home,
			mine,
			found,
		},
		data() {
			return {
				isShowCard:false,
				showModal: false,
				PageCur: 0,
				windowWidth: 0,
			}
		},
		onLoad() {
			const rect = uni.getMenuButtonBoundingClientRect();
		},
		methods: {
			
			onConfirm() {
				console.log('点击确认1')
				this.showModal = false
			},
			onCancel() {
				console.log('点击取消')
				this.showModal = false
			},
			swiperChange(e) {
				this.PageCur = e.detail.current
			},
			toggleShowModal(){
				this.showModal = !this.showModal
				console.log('展示',this.showModal);
			},
			ontoggle(i) {
				// this.showModal = !this.showModal
				this.PageCur = i
				console.log('i', i);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.circle {
		position: fixed;
		right: 0;
		top: 70vh;
		width: 50px;
		height: 50px;
		backdrop-filter: blur(10px);
		background-color: rgba(213, 255, 255, 0.1);
		border-radius: 50%;
	}

	.tabbar-page {
		width: 100vw;
		// height: 100vh;
		position: absolute;
		left: 0rpx;
		bottom: 0rpx;
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 103;
	}

	.content {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		// background: linear-gradient(135deg, #faed00 0%, #fdb218 25%, #d63d2d 60%, #64024d 100%);
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	/* From Uiverse.io by Cobp */ 
	.container-cards-ticket {
	  perspective: 1000px;
	}
	
	.card-ticket {
	  position: relative;
	  height: 150px;
	  width: 320px;
	  display: flex;
	  color: #2d2d2d;
	  background-color: #ffffff;
	  border-radius: 1rem;
	  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.25);
	  z-index: 10;
	  gap: 1rem;
	  animation: animation-card 10s infinite;
	  overflow: hidden;
	
	  &:hover {
	    animation-play-state: paused;
	    transform: translateY(-30px);
	
	    & .content-ticket::after,
	    & .content-ticket::before,
	    & .container-icons {
	      animation-play-state: paused;
	    }
	  }
	}
	
	.separator {
	  position: absolute;
	  top: 0;
	  left: 50px;
	  width: 16px;
	  height: 100%;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  flex-direction: column;
	  z-index: 10;
	
	  & .span-lines {
	    position: relative;
	    display: flex;
	    height: 100%;
	    border-left: 2px dashed #e8e8e8;
	
	    &::after {
	      content: "";
	      position: absolute;
	      top: -8px;
	      left: 50%;
	      transform: translateX(-50%);
	      width: 16px;
	      height: 16px;
	      border-radius: 16px;
	      background-color: #e8e8e8;
	    }
	
	    &::before {
	      content: "";
	      position: absolute;
	      bottom: -8px;
	      left: 50%;
	      transform: translateX(-50%);
	      width: 16px;
	      height: 16px;
	      border-radius: 1rem;
	      background-color: #e8e8e8;
	    }
	  }
	}
	
	.content-ticket {
	  position: relative;
	  justify-content: space-between;
	  width: 100%;
	  display: flex;
	
	  &::after {
	    content: "";
	    position: absolute;
	    top: 0;
	    right: 0;
	    background-image: linear-gradient(
	      90deg,
	      rgba(0, 0, 0, 0),
	      rgba(0, 0, 0, 0.8)
	    );
	    transform: translateX(200px) scale(1.5);
	    filter: blur(10px);
	    width: 200px;
	    height: 100%;
	    animation: shadow-card 10s infinite;
	  }
	
	  &::before {
	    content: "";
	    position: absolute;
	    top: 0;
	    left: -100px;
	    background-image: linear-gradient(
	      90deg,
	      rgba(0, 0, 0, 0),
	      #ffffff,
	      rgba(0, 0, 0, 0)
	    );
	    transform: translateX(-100px) scale(1.5) rotate(20deg);
	    width: 80px;
	    height: 100%;
	    animation: light-card 10s infinite;
	  }
	}
	
	.content-data {
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
	  width: 100%;
	  padding: 0.625rem 0.75rem;
	  gap: 0.25rem;
	
	  & .data-flex,
	  & .data-flex-col {
	    width: 100%;
	    display: flex;
	    justify-content: space-between;
	    gap: 0.25rem;
	  }
	
	  & .data-flex-col {
	    padding-bottom: 0.25rem;
	    flex-direction: column;
	  }
	}
	
	.data {
	  font-size: 10px;
	  line-height: 12px;
	
	  & .title {
	    color: #aeaeae;
	  }
	
	  & .subtitle {
	    font-weight: 500;
	    color: #212121;
	  }
	}
	
	.destination {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	
	  & .dest {
	    display: flex;
	    flex-direction: column;
	
	    & .country {
	      font-size: 10px;
	      line-height: 1;
	      color: #aeaeae;
	    }
	
	    & .acronym {
	      font-weight: 700;
	      color: #2d2d2d;
	    }
	
	    & .hour {
	      font-size: 10px;
	      line-height: 12px;
	      display: flex;
	      align-items: center;
	      gap: 4px;
	      color: #2d2d2d;
	    }
	  }
	}
	
	.container-icons {
	  width: fit-content;
	  padding: 0.625rem;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: space-between;
	  animation: color-card 10s infinite;
	  z-index: -1;
	
	  & .icon {
	    color: #ffffff;
	  }
	}
	
	@keyframes animation-card {
	  0% {
	    transform: translateZ(0px);
	  }
	
	  25% {
	    transform: translateX(-10px) rotateY(-20deg);
	  }
	
	  75% {
	    transform: translateX(10px) rotateY(20deg);
	  }
	
	  100% {
	    transform: translateZ(0px);
	  }
	}
	
	@keyframes light-card {
	  25% {
	    transform: translateX(450px) scale(1.5) rotate(25deg);
	  }
	
	  50% {
	    transform: translateX(-100px) scale(1.5) rotate(25deg);
	  }
	}
	
	@keyframes shadow-card {
	  35% {
	    transform: translateX(200px) scale(1.5);
	  }
	
	  75% {
	    transform: translateX(0px) scale(1.5);
	  }
	}
	
	@keyframes color-card {
	  0% {
	    background-color: #ffbd44;
	  }
	
	  10% {
	    background-color: #fb6902;
	  }
	
	  15%,
	  25% {
	    background-color: #ff4141;
	  }
	
	  35% {
	    background-color: #fb6902;
	  }
	
	  40% {
	    background-color: #ffbd44;
	  }
	
	  50% {
	    background-color: #fb6902;
	  }
	
	  55%,
	  75% {
	    background-color: #ff4141;
	  }
	
	  75% {
	    background-color: #fb6902;
	  }
	
	  100% {
	    background-color: #ffbd44;
	  }
	}
	.show-card{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}

</style>